<template>
  <div>
    <el-row class="logo">
      <el-col>
        <img
          src="http://v.bootstrapmb.com/2020/12/b62q79261/assets/img/logo.png"
          alt=""
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-menu
          :default-active="$route.path"
          :router="true"
          background-color="transparent"
          :unique-opened="true"
        >
          <el-menu-item-group>
            <template slot="title">主菜单</template>
            <el-menu-item index="/control">
              <i class="el-icon-menu"></i>
              控制面板</el-menu-item
            >
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-user"></i> 学生</template
              >
              <el-menu-item index="/student" :class="{ 'is-acive': false }"
                >学生名单</el-menu-item
              >
              <el-menu-item index="/student/view"  v-if="userInfo.permission === 1">学生视图</el-menu-item>
              <el-menu-item index="/student/add" v-if="userInfo.permission > 1">学生添加</el-menu-item>
              <el-menu-item index="/student/edit" v-if="userInfo.permission === 1">学生编辑</el-menu-item>
            </el-submenu>
            <el-submenu index="/teacher" v-if="userInfo.permission > 1">
              <template slot="title">
                <i class="el-icon-user-solid"></i> 老师</template
              >
              <el-menu-item index="/teacher">老师名单</el-menu-item>
              <el-menu-item index="/teacher/view" v-if="userInfo.permission === 2">老师视图</el-menu-item>
              <el-menu-item index="/teacher/add"  v-if="userInfo.permission > 2">老师添加</el-menu-item>
              <el-menu-item index="/teacher/edit" v-if="userInfo.permission === 2">老师编辑</el-menu-item>
            </el-submenu>
            <el-submenu index="/department">
              <template slot="title"
                ><i class="el-icon-s-platform"></i> 学院</template
              >
              <el-menu-item index="/department">学院列表</el-menu-item>
              <el-menu-item index="/department/add" v-if="userInfo.permission > 2">学院添加</el-menu-item>
              <el-menu-item index="/department/edit" v-if="userInfo.permission > 2">学院编辑</el-menu-item>
            </el-submenu>
            <el-submenu index="/subject">
              <template slot="title">
                <i class="el-icon-s-check"></i> 科目</template
              >
              <el-menu-item index="/subject">科目列表</el-menu-item>
              <el-menu-item index="/subject/add" v-if="userInfo.permission > 2">科目添加</el-menu-item>
              <el-menu-item index="/subject/edit" v-if="userInfo.permission > 2">科目编辑</el-menu-item>
            </el-submenu>
          </el-menu-item-group>

          <el-menu-item-group>
            <template slot="title">管理</template>
            <el-submenu index="/account">
              <template slot="title">
                <i class="el-icon-refrigerator"></i> 账户</template
              >
              <el-menu-item index="/account" v-if="userInfo.permission > 2">薪水</el-menu-item>
              <el-menu-item index="/account/charge">收费</el-menu-item>
              <el-menu-item index="/account/spend">花费</el-menu-item>
              <!-- 只做了 学生和学生，老师和学生的交易  校长和院长没做这个功能 -->
              <el-menu-item index="/account/trade" v-if="userInfo.permission < 3">交易</el-menu-item>
            </el-submenu>
            <el-menu-item index="/actively">
              <i class="el-icon-bangzhu"></i> 活动</el-menu-item
            >
            <el-menu-item index="/postman">
              <i class="el-icon-collection"></i> 收件箱</el-menu-item
            >
            <el-menu-item index="/testlist">
              <i class="el-icon-postcard"></i> 考试清单</el-menu-item
            >

            <el-menu-item index="/time">
              <i class="el-icon-odometer"></i> 时间表</el-menu-item
            >
            <el-menu-item index="/libary">
              <i class="el-icon-crop"></i> 图书馆</el-menu-item
            >
          </el-menu-item-group>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex"

export default {
  name: "Nav",
  data() {
    return {};
  },
  mounted() {
     console.log(this.userInfo.permission)
  },
  computed: {
    ...mapState("user",["userInfo"])
  },
  props: ["drawer"],
};
</script>

<style lang="scss">
.el-aside {
  background-color: #f7f7fa;
}

.el-menu-item-group__title {
  font-size: 16px !important;
}

.el-menu-item:hover,
.el-submenu__title:hover,
.el-menu-item.is-active {
  background-color: white !important;
}

.logo {
  height: 60px;
  div {
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 20px;
    img {
      width: 153px;
      height: 40px;
    }
  }
}
</style>
